<template>
    <div id="body">
      <el-button type="text" @click="baseStatistics.exportExcelDialog = true" style="margin-right: 20px">基地统计导出</el-button>
      <el-dialog
        title="选择月份"
        :visible.sync="baseStatistics.exportExcelDialog"
        width="30%"
        center>
        <el-date-picker
          v-model="baseStatistics.selectMonth"
          type="month"
          placeholder="选择月份">
        </el-date-picker>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="exportBaseStatisticsExcel()">确 定</el-button>
      </span>
      </el-dialog>

      <el-button type="text" @click="schoolStatistics.exportExcelDialog = true" style="margin-right: 20px">学校统计导出</el-button>
      <el-dialog
        title="选择月份"
        :visible.sync="schoolStatistics.exportExcelDialog"
        width="30%"
        center>
        <el-date-picker
          v-model="schoolStatistics.selectMonth"
          type="month"
          placeholder="选择月份">
        </el-date-picker>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="exportSchoolStatisticsExcel()">确 定</el-button>
      </span>
      </el-dialog>

      <el-button type="text" style="margin-left: 30px" @click="exportMonth">概况统计</el-button>
      <el-row>
        <el-col :span="8">日志统计</el-col>
        <el-col :span="2">
          <el-button @click="toSearch" type="primary">查询</el-button>
        </el-col>
        <el-col :span="3">
          <el-select style="margin-right: 20px" v-model="currentType" clearable placeholder="全部">
            <el-option v-for="item in types" :key="item.name" :label="item.desc" :value="item.name"></el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select v-model="currentRole" clearable placeholder="全部">
            <el-option v-for="item in roles" :key="item.name" :label="item.desc" :value="item.name"></el-option>
          </el-select>
        </el-col>
        <el-col :span="3" style="margin-left: 20px">
          <el-date-picker v-model="dateRange" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <h1 style="margin-top: 20px; margin-bottom: 20px">共计：{{ table.page.total }}</h1>
          <el-table :data="table.data" :v-loading="table.loading">
            <el-table-column label="日期" prop="operationTime"></el-table-column>
            <el-table-column label="类型" prop="type"></el-table-column>
            <el-table-column label="编号" prop="operator.id"></el-table-column>
            <el-table-column label="角色" prop="operator.role"></el-table-column>
            <el-table-column label="姓名" prop="operator.name"></el-table-column>
            <el-table-column label="IP" prop="operationIp"></el-table-column>
          </el-table>
        </el-col>
        <el-col :span="17" style="margin-top: 30px">
          <el-pagination @current-change="curtChange" background layout="prev, pager, next"
                         :current-page="table.page.current"
                         :total="table.page.total">
          </el-pagination>
        </el-col>
      </el-row>

    </div>
</template>

<script>
  import { getLogTypes, getRoles, searchLog } from '../../../../api/feizns/statistics/logging'
  import { getRole, toYMD_HM } from '../../../../utils/feizns/index'
  import config from '../../../../plugin/axios/config'

  export default {
    name: 'LoggingStatistics',
    data() {
      return {

        baseStatistics: {
          selectMonth: new Date(),
          exportExcelDialog: false,
        },

        schoolStatistics: {
          selectMonth: new Date(),
          exportExcelDialog: false,
        },

        currentType: null,
        currentRole: null,

        types: [],
        roles: [],

        dateRange:[new Date(new Date() - (1000 * 60 * 60 * 24)), new Date()],
        table: {
          loading: false,
          data: [],
          page: {
            current:1,
            total: 0,
            size: 10
          }
        },
      }
    },

    methods: {
      exportBaseStatisticsExcel() {
        this.baseStatistics.exportExcelDialog = false;
        window.location.href = config.baseURL + '/api/v1/statistics/export/bases?month=' + this.baseStatistics.selectMonth.toJSON();
      },

      exportSchoolStatisticsExcel() {
        this.schoolStatistics.exportExcelDialog = false;
        window.location.href = config.baseURL + '/api/v1/statistics/export/schools?month=' + this.schoolStatistics.selectMonth.toJSON();
      },

      exportMonth() {
        window.location.href = config.baseURL + '/api/v1/statistics/export/overview/month';
      },

      search() {
        this.table.loading = true;

        let params = {
          page_no : this.table.page.current,
          per_page : this.table.page.size,
          type : this.currentType,
          role : this.currentRole,
          startTime: this.dateRange[0],
          endTime: this.dateRange[1]
        }

        this.table.data = [];
        searchLog(params).then(resp => {
           this.table.page.total = resp.data.total;
           resp.data.rows.forEach(item => {
             item.operator.role = getRole(item.operator.role);
             item.operationTime = toYMD_HM(item.operationTime);
             this.table.data.push(item)
           });
           this.table.loading = false;
        })
      },

      toSearch() {
        this.table.page.current = 1;
        this.search();
      },

      curtChange(n) {
        this.table.page.current = n;
        this.search();
      },

      fillLogTypes() {
        if ( this.types.length == 0 ) {
          getLogTypes().then(resp => {
            for (const k in resp.data)
              this.types.push({ name : k, desc : resp.data[k]})
          });
        }
      },

      fillRoles() {
        if ( this.roles.length == 0 )
          getRoles().then(resp => resp.data.forEach(item => this.roles.push(item)));
      }
    },

    mounted() {
      this.fillLogTypes();
      this.fillRoles();
      this.curtChange();
    }
  }
</script>

<style scoped>

  #body {
    padding: 40px;
  }

</style>
